import React, { Component } from "react";
import * as api from "api/index";
import "./index.scss";

class Browse extends Component {
  constructor(props) {
    super(props);
    this.state = {
      browseList: [
        {
          //   id: "4b1649f0-ae63-11ec-ba5b-3bb17d65f78f",
          //   imageUrl:
          //     "https://img.villaday.com/images/house_392/88870280/88870280-10-14757134.jpg",
          //   name: "大鹏古城·​千语居7房客栈",
          //   showMinAverage: "219",
          //   showMinPrice: "3288",
          //   updateTime: "2022-03-27",
        },
      ],
    };
  }

  componentDidMount() {
    this.getBrowseList();
  }

  getBrowseList() {
    api.$browseList().then((res) => {
      console.log(res);
      let browseList = res.result;

      // 1.找出有哪些日期
      let dateList = browseList.map((item) => item.updateTime);

      // 2.对日期列表去重
      let set = new Set(dateList);

      // 3.把 set 转为数组
      dateList = [...set];

      // 4.newList用来储存处理后的数据
      let newList = [];

      // 5.对 dateList 进行遍历，过滤出相同日期的数据
      dateList.forEach((date) => {
        // 6.从 list 列表找到日期跟 dete 相同的对象
        let subList = browseList.filter((item) => item.updateTime === date);
        // 7.构造对象
        let obj = {
          date,
          subList,
        };
        newList.push(obj);
      });
      // 8.newList 获取到了日期数据
      console.log(newList);

      this.setState({
        browseList: newList,
      });
      // 9.browse 获取到了对象
      console.log(browseList);

    });
  }

  render() {
    return (
      <div className="browse-index">
        {this.state.browseList.map((item) => (
          <ul className="list" key={item.date}>
            <div className="day flex aic jc-sb">
              <p className="data ml-15">{item.date}</p>
              <p className="del mr-15">清除</p>
            </div>


            {item.subList && item.subList.map((supItem) => (
                <li className="item bg-fff" key={supItem.id}>
                  <div className="box flex aic pl-10">
                    <img src={supItem.imageUrl} alt="" />
                    <div className="address ml-10">
                      <p className="mt-10 f16">{supItem.name}</p>
                      <p className="money f16 mt-10">
                        <span>￥{supItem.showMinPrice}</span>
                        <span className="num ml-10">
                          人均:{supItem.showMinAverage}
                        </span>
                      </p>
                    </div>
                  </div>
                </li>
              ))}
          </ul>
        ))}
      </div>
    );
  }
}

export default Browse;
